﻿
var MovieGridRow = React.createClass({
handleClickSeeMore: function() {
		$(".seemore").prop("href", "/Home/About/"+this.props.item.Id);
    },
	handleClickReservation: function() {
		$('#sel1').empty();
        $('#sel3').empty();
        $('#ticketNr').val(0);
        $('#discountedticketNr').val(0);
        $('#labelTicket').text("Tickets: ");
        $('#labelDiscountedTicket').text("Discounted tickets: ");
		$('#inputLanguage').val("");
        $('#inputAvailableTicket').val("");
		$('#inputName').val("");
        $('#inputLastName').val("");
        $('#inputEmail').val("");
		$('#inputTelephone').val("");

		$(".movieId").prop("value", this.props.item.Id);
		var movieId= this.props.item.Id;
		var data = {"movieId" : movieId};
		$.ajax({
                type: "POST",
                url: "/Home/GetMovie",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                success: function (Data) {
                    // Parse the returned json data
                    // Use jQuery's each to iterate over the opts value
					$('#inputMovie').val(Data[0].movieName);
					$('#sel1').empty();
					$.ajax({
                type: "POST",
                url: "/Home/GetCinema",
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                success: function (Data) {
                    $('#sel1').append('<option value=""></option>');

                $.each(Data, function (i, d) {
                    // You will need to alter the below to get the right values from your json object.  Guessing that d.id / d.modelName are columns in your carModels data
                    $('#sel1').append('<option value="' + d.cinemaId +'">' +  d.cinemaName + '</option>');
					
					
                });
                }
            });
                }
            });
    },
        render : function(){
            return (
					<div className="col-md-4 col-sm-6">
    				<div className="cuadro_intro_hover ">
						<p>
							<img src={this.props.item.Image} className="img-responsive" alt=""></img>
						</p>
						<div className="caption">
							<div className="blur"></div>
							<div className="caption-text">
								<h3>{this.props.item.Title}</h3>
								<div className="buttondiv">
								<a className="seemore" href="/Home/About/" onClick={this.handleClickSeeMore}> See more </a>
								<br></br>
								<a className="reservation" data-toggle="modal" data-target="#squarespaceModal" onClick={this.handleClickReservation}> Book now </a>
								<input type="hidden" className="movieId" value="" /> 
								</div>
							</div>
						</div>
					</div>
				
	    </div>

					
            );
        }
    });

    var MovieGridTable = React.createClass({
        getInitialState: function(){
            return {
                items:[]
            }
        },
        componentDidMount:function(){
            $.get(this.props.dataUrl, function(models){
                if(this.isMounted()){
                    this.setState({
                        items: models
                    });
                }
            }.bind(this));
        },
        render : function(){
           var rows = [];
            this.state.items.forEach(function(item){
                rows.push(<MovieGridRow item={item} />);
            });
           return (
		   <div className="row">
				{rows}
            </div>
                   
            );
        }
    });
   React.render(
        <MovieGridTable dataUrl="/Home/GetMovies" />,
        document.getElementById('movies')
    );


